import './App.scss'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
} from 'antd-mobile-icons'
import { startTransition } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

function App() {
  // tab列表
  const tabs = [
    {
      key: '/',
      // title: '首页',
      icon: <AppOutline />,
    },

    {
      key: 'chat',
      // title: '聊天',
      icon: <MessageOutline />,
    },
  ]

  const navigate = useNavigate()
  const tabChangeAction = (key) => startTransition(() => {
    navigate(key)
  })

  return (
    <div className="box">
      <div className='outlet'>
        <Outlet></Outlet>
      </div>
      <div className='tabbar'>
        <div className='tab'>
          <TabBar safeArea onChange={tabChangeAction}>
            {tabs.map(item => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </div>

      </div>
    </div>
  )
}

export default App